const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 800;

let screenShot;
let objects = [];
let curObj = null;

let quad = new QuadTree(
  0,
  {
    x: 0,
    y: 0,
    width: canvas.width,
    height: canvas.height,
  },
  ctx
);

// canvas.addEventListener("mousemove", function (e) {
//   let cRect = canvas.getBoundingClientRect();
//   let canvasX = Math.round(e.clientX - cRect.left);
//   let canvasY = Math.round(e.clientY - cRect.top);
//   ctx.clearRect(0, 0, canvas.width, canvas.height);
//   ctx.fillStyle = "#000";
//   ctx.fillText("X: " + canvasX + ", Y: " + canvasY, 10, 20);
// });

canvas.addEventListener("click", function (e) {
  let cRect = canvas.getBoundingClientRect();
  let canvasX = Math.round(e.clientX - cRect.left);
  let canvasY = Math.round(e.clientY - cRect.top);
  //ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "rgb(221, 81, 69)";
  let x = canvasX;
  let y = canvasY;
  let width = Math.random() * 5 + 3;
  let height = Math.random() * 5 + 3;
  ctx.fillRect(x, y, width, height);
  curObj = {
    x: x,
    y: y,
    width: width,
    height: height,
  };
  objects.push(curObj);
});

setInterval(() => {
  quad.clear();
  for (let i = 0; i < objects.length; i++) {
    quad.insert(objects[i]);
  }
  if(curObj != null){
    let result = quad.queryQuadTree([],curObj);
    //console.log(result);
  }

}, 1000);

// objects.forEach(ele => {
//     ctx.fillStyle = "#000";
//     ctx.fillRect(ele.x,ele.y,ele.width,ele.height);
// });

// let quad = new QuadTree(0, {
//     x: 0,
//     y: 0,
//     width: canvas.width,
//     height: canvas.height,
//   },
//   ctx);
//   for (let i = 0; i < objects.length; i++) {
//     quad.insert(objects[i]);
//   }
// [{
//     x:250,
//     y:250,
//     width: 20,
//     height: 15,
// },
// {
//     x:315,
//     y:325,
//     width: 20,
//     height: 15,
// }]
